<template>
  <div class="quick-manage">
    <div class="top-box">
      <p class="select-num">已勾选{{ multipleSelection.length }}个</p>
      <div class="search-box">
        <i class="iconfont icon-sousuo"></i>
        <input class="search" type="text" v-model="search" />
      </div>
    </div>
    <keep-alive>
      <el-table
        border
        ref="multipleTableRef"
        :data="filterTableData"
        :row-key="getRowKeys"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        max-height="630"
        :header-row-style="{ fontSize: 20 + 'px', color: 'rgb(63, 137, 185)' }"
        :row-style="{ fontSize: 20 + 'px' }"
      >
        <el-table-column type="selection" width="55" :reserve-selection="true" />
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column label="性别" width="100">
          <template #default="scope">{{ scope.row.sex == 1 ? "男" : "女" }}</template>
        </el-table-column>
        <el-table-column prop="studentNumber" label="学号" width="200" show-overflow-tooltip />
        <el-table-column property="college" label="学院" width="150" show-overflow-tooltip />
        <el-table-column property="phone" label="联系方式" width="200" />
        <el-table-column property="selection" label="意向部门" width="150" show-overflow-tooltip />
        <el-table-column property="introduction" label="自我介绍" width="150" show-overflow-tooltip />
        <el-table-column>
          <template #default="scope">
            <button class="table-btn" @click="jump(scope.row.id)">详情</button>
          </template>
        </el-table-column>
      </el-table>
    </keep-alive>
    <div class="bottom">
      <div
        class="buttom-box"
        :style="{
          justifyContent:
            route.path.search('association') == -1 ? 'end' : 'space-between',
        }"
      >
        <template v-if="route.path.search('association') == -1">
          <Button
            v-for="(item, index) in Dbuttons"
            :key="item.info + index"
            :info="item.info"
            :className="item.className"
            :backColor="item.backColor"
            :width="item.width"
            :event="item.event"
          ></Button>
        </template>
        <template v-else>
          <Button
            v-for="(item, index) in Abuttons"
            :key="item.info + index"
            :info="item.info"
            :className="item.className"
            :backColor="item.backColor"
            :width="item.width"
            :event="item.event"
          ></Button>
        </template>
      </div>
    </div>
    <teleport to="#app">
      <div class="mask" v-show="flag">
        <div class="message-box">
          <div class="title">{{ title }}</div>
          <template v-if="behavior == 0">亲爱的xxx同学，你好：</template>
          <div class="message" v-if="behavior == 0">
            <textarea
              name="text"
              style="height: 215px; width: 100%; font-size: 25px"
              v-model="message"
            ></textarea>
          </div>
          <div class="message" v-else-if="behavior == 1">
            <p>请确认</p>
            <textarea
              disabled
              v-model="applicants"
              class="applicants"
              style="height: 100px; color: #3f89b9"
            ></textarea>
            <p>的面试结果为</p>
            <div class="radio-box">
              <Radio
                :value="false"
                v-model="isPass"
                id="eliminate"
                info="淘汰"
                color="white"
                backgroundColor="#F90101"
                name="result"
              ></Radio>
              <Radio
                :value="true"
                v-model="isPass"
                id="pass"
                info="通过"
                color="white"
                backgroundColor="#20618C"
                name="result"
              ></Radio>
            </div>
          </div>
          <div class="message" v-else-if="behavior == 2">
            <p class="enter-next">部门进入下一轮面试环节</p>
          </div>
          <div class="button-box">
            <Button
              info="取消"
              class="cancel"
              width="100px"
              backColor="#F90101"
              :event="
                () => {
                  flag = false;
                }
              "
            ></Button>
            <Button
              info="确认"
              class="send"
              backColor="white"
              width="100px"
              color="#8a8888"
              :event="confirm"
            ></Button>
            <slot></slot>
          </div>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  computed,
  toRaw,
  getCurrentInstance,
} from "vue";
import { useRouter, useRoute } from "vue-router";
// import { ElMessageBox, ElMessage } from "element-plus";
import type { ElTable } from "element-plus";
import Button from "../components/Button.vue";
import Radio from "../components/Radio.vue";
import { Student } from "../api/ManageStudent";
// import GetInfo from "../api/GetInfo";
import { managerStudent } from "../api/ManageStudent";
// import inform from "../utils/Inform";

const { proxy } = getCurrentInstance();
const resetSetItem = proxy["$resetSetItem"];

let router = useRouter();
let route = useRoute();

// 学生数组，存放学生信息
let tableData = ref<Student[]>([]);
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<Student[]>([]);

// 搜索框的值
let search = ref("");

// 遮罩层相关变量
let flag = ref(false); //遮罩层是否打开
let behavior = ref(0);
let title = ref("编辑信息内容"); //不同遮罩层的不同标题
let message = ref(""); //textarea值
let isPass = ref(false); //在通知结果中的是否通过

// 存放选中的学生的ID
let list: Array<number> = [];

// 存放选中学生名称的字符串
let applicants = ref("");

// 获取报名学生的数据
managerStudent.getApplicants(~~sessionStorage.getItem("depId")).then((res) => {
  tableData.value = res;
});

// 用于对tableData筛选过滤的函数
const filterTableData = computed(() =>
  tableData.value.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);

// 当多选项发生变化时的操作
const handleSelectionChange = (val: Student[]) => {
  applicants.value = "";
  multipleSelection.value = val;
  const data = toRaw(multipleSelection.value);
  // 生成选中学生的字符串
  applicants.value = data
    .map((item) => {
      return item.name;
    })
    .join("、");
  // 存放选中学生的id
  list = data.map((item) => {
    return item.id;
  });
};

// 给每行数据添加一个key属性，保证筛选后保持已选项
const getRowKeys = (row: any): any => {
  return row.id;
};

const Dbuttons = [
  {
    info: "发送邮箱",
    className: "send-message",
    backColor: "#20618C",
    event: () => {
      flag.value = true;
      behavior.value = 0;
      title.value = "编辑信息内容";
    },
  },
  {
    info: "通知结果",
    className: "send-result",
    backColor: "#3F89B9",
    event: () => {
      flag.value = true;
      behavior.value = 1;
      title.value = "选择通知结果";
    },
  },
  {
    info: "导出表格",
    className: "export-table",
    backColor: "#158F9C",
    event: () => {
      managerStudent.exportExcel(list).then((res) => {
        window.open("http://" + res, "_self");
      });
    },
  },
  {
    info: "进入下一轮面试",
    className: "enter-into",
    backColor: "#F90101",
    width: "200px",
    event: () => {
      title.value = "";
      flag.value = true;
      behavior.value = 2;
    },
  },
];
const Abuttons = [
  {
    info: "查看报名数据",
    className: "look-over",
    backColor: "#20618C",
    event: () => {
      const { href } = router.resolve({
        name: "Examine",
      });
      window.open(href, "_blank");
    },
  },
  {
    info: "导出表格",
    className: "export-table",
    backColor: "#158F9C",
    event: () => {
      managerStudent.exportExcel(list).then((res) => {
        window.open("http://" + res, "_self");
      });
    },
  },
];

// 遮罩层的弹窗确认按钮
const confirm = () => {
  if (behavior.value == 0) {
    managerStudent.noticeByemail(list, message.value).then((res) => {
      flag.value = false;
    });
  } else if (behavior.value == 1) {
    console.log("通知结果");
  } else {
    managerStudent
      .enterNextInterview(~~sessionStorage.getItem("depId"))
      .then((res) => {
        if (res?.interviewNow) {
          resetSetItem("x", res.interviewNow);
        }
        flag.value = false;
      });
  }
};

// 跳转到详情页
const jump = (id: string) => {
  const name = route.meta.isAssociation ? "ADetail" : "DDetail";
  const { href } = router.resolve({
    name: name,
    query: {
      id: id,
    },
  });
  window.open(href, "_blank");
};
</script>

<style lang="scss" scope>
$colors: (
  "t-blue": #21618d,
  //常用颜色--蓝
    "t-grey": #8a8888,
  //字体常用颜色--灰
    "t-white": #f5f5f5,
  //字体常用颜色--白
    "border": #707070,
  //边框颜色
    "W_blue": #20618c,
  "L-blue": #3f89b9,
  "green": #158f9c
);
.quick-manage {
  width: 1300px;
  max-height: 770px;
  background-color: white;
  padding: 10px 50px 0;
  border: 1px solid map-get($map: $colors, $key: border);
  box-shadow: 3px 3px 10px map-get($map: $colors, $key: border);
  .top-box {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .select-num {
      margin-top: 20px;
      font-size: 25px;
      color: map-get($map: $colors, $key: border);
    }
    .search-box {
      margin-bottom: 15px;
      margin-right: 5px;
      width: 295px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 2px;
      border: 2px solid map-get($map: $colors, $key: border);
      border-radius: 10px;
      i,
      .search {
        font-size: 20px;
        color: map-get($map: $colors, $key: border);
        font-weight: bold;
      }
      i {
        font-size: 25px;
        cursor: pointer;
      }
      .search {
        width: 250px;
      }
    }
  }
  .bottom {
    height: 100px;
    background: white;
    .buttom-box {
      margin-top: 20px;
      background: white;
      display: flex;
      align-items: center;
      button {
        cursor: pointer;
        width: 150px;
        height: 40px;
        border-radius: 15px;
        margin-right: 10px;
        font-size: 20px;
        font-weight: bold;
        color: white;
        border: none;
        background-color: #707070;
      }
    }
  }
}

.table-btn {
  width: 60px;
  height: 30px;
  cursor: pointer;
  border: none;
  background-color: #3f89b9;
  font-size: 18px;
  color: white;
  border-radius: 10px;
  margin: 0 auto;
}

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(245, 245, 245, 0.5);
  display: flex;
  z-index: 200;
  justify-content: center;
  align-items: center;
  .message-box {
    background-color: map-get($map: $colors, $key: t-white);
    width: 772px;
    height: 426px;
    padding: 30px;
    border: 1px solid map-get($map: $colors, $key: border);
    .title {
      height: 60px;
      font-size: 25px;
      font-weight: bold;
      color: map-get($map: $colors, $key: L-blue);
    }
    .message,
    .applicants {
      width: 711px;
      // height: 215px;
      font-size: 20px;
      border-radius: 10px;
      padding: 5px;
      &::-webkit-scrollbar {
        display: none;
      }
      .enter-next {
        width: 100%;
        height: 215px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        font-weight: bold;
        color: map-get($map: $colors, $key: L-blue);
      }
    }
    .radio-box {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .button-box {
      float: right;
      margin-top: 10px;
      .button {
        margin-left: 20px;
      }
    }
  }
}
</style>

